<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    .box{
        width: 390px;
        height: 400px;
        background-color: #EEEEEE;
        display: flex;  /*  声明当前盒子时弹性盒子 */
        /* 设置主轴方向*/
        flex-direction: row;
        /* 弹性元素在主轴方向的排列方式  left  right  center  space-between space-around */
        justify-content: space-around;
        /* 弹性元素在侧轴方向的排列方式 flex-end  flex-start  center   */
        /*align-items: flex-end; 单行*/
        align-content: space-around;
        flex-wrap: wrap;
    }
    .box>div{
        width: 120px;
        height: 100px;
        background-color: #FFA500;
    }

    </style>
</head>
<body>

<!--
        弹性盒子是 CSS3 的一种新的布局模式。
       CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
       引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
       display: flex;
       flex-wrap: wrap;  设置弹性盒子中元素的折行   如果不设置则元素默认在一行展示

       主轴   默认  水平

       侧轴
-->

<div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
</div>

</body>
</html>